<template>
  <scroll-view class="flex flex-scroll mainContainer" ref="scrollView"
    @scroll.native="swipeDownRefreshMoveEventDisabled = !$event.target.scrollTop"
  >
    <div class="refreshHintBox" :style="{ minHeight: refreshHintBoxHeight + 'px' }"
      :class="{ heightAnimated }" ref="refreshHintBox"
    >
      <div class="content flex-row flex-center" :style="{ height: refreshHintBoxHeight + 'px' }">
        <spinner type="android" v-if="swipeDownRefreshStatus === 2"></spinner>
        <span class="text">{{ refreshHintBoxText }}</span>
      </div>
    </div>

    <header>
      <swiper :list="carouselList" height="240px"
        dots-class="carouse-dot"
        dots-position="center"
        :auto="true"
        :loop="true"
        :interval="5000"
      ></swiper>

      <div class="content">
        <div class="searchBar flex-row flex-around">
          <div class="city" @click="$toView('citySelect')">
            <span class="selectedCity">{{ city }}</span>
            <img src="@img/home/home_icon_xiala@2x.png" width="15px">
          </div>

          <div class="serach com-input-container flex-grow" style="visibility: hidden;">
            <input type="text" placeholder="请输入您想要的车" readonly>
          </div>

        </div>
      </div>
    </header>

    <grid :col="2" :cols="4" class="blocks" :show-lr-borders="false" :show-vertical-dividers="false">
    <grid-item v-for="({icon, label, link}, index) in blocks" :key="index"
               :icon="icon" :label="label"
               @click.native="/^https?:\/\//.test(link) ? open(link) : $toView(link)"

    ></grid-item>
  </grid>

    <main>
      <div class="content">
        <div class="subtitle flex-row">
          <span class="text">发现</span>
          <div class="rightBtn" @click="$toView('allList/finds')"></div>
        </div>
        <find-item :data="findsData" v-if="findsData"
          @click.native="$toView('info/find', { query: { id: findsData.id } })"
        ></find-item>

        <div class="subtitle flex-row">
          <span class="text">人找车</span>
          <div class="rightBtn" @click="$toView('allList/seekCar')"></div>
        </div>

        <div>
          <seek-car-item v-for="(item, index) in seekCarData" :key="index" :data="item"
             @click.native="$toView('info/seek', { query: { id: item.id, type: 2 } })"
          ></seek-car-item>
        </div>

        <div class="subtitle flex-row">
          <span class="text">车找人</span>
          <div class="rightBtn" @click="$toView('allList/seekPerson')"></div>
        </div>

        <div>
          <seek-person-item v-for="(item, index) in seekPersonData" :key="index" :data="item"
             @click.native="$toView('info/seek', { query: { id: item.id } })"
          ></seek-person-item>
        </div>

        <div class="subtitle flex-row">
          <span class="text">二手车</span>
          <div class="rightBtn" @click="$toView('allList/usedCar')"></div>
        </div>

        <div>
          <car-info-item v-for="(item, index) in usedCarData" :key="index" :data="item"
            @click.native="$toView('info/usedCar', { query: { id: item.id } })"
          ></car-info-item>
        </div>

        <div class="subtitle flex-row">
          <span class="text">标书</span>
          <div class="rightBtn" @click="$toView('allList/signs')"></div>
        </div>

        <div>
          <sign-item v-for="(item, index) in signsData" :key="index" :data="item"
            @click.native="$toView('info/sign', { query: { id: item.id } })"
          ></sign-item>
        </div>
      </div>
    </main>
  </scroll-view>
</template>

<script>
import { Swiper, Grid, GridItem, Confirm, Spinner } from 'vux'
import FindItem from '@c/item/FindItem'
import CarInfoItem from '@c/item/CarInfoItem'
import SignItem from '@c/item/SignItem'
import SeekCarItem from '@c/item/SeekCarItem'
import SeekPersonItem from '@c/item/SeekPersonItem'
import ScrollView from '@c/ScrollView'
import saveScroll from '@u/mixin/saveScroll.js'
import swipeDownRefresh from '@u/mixin/swipeDownRefresh'

export default {
  components: {
    Swiper,
    Grid,
    GridItem,
    Confirm,
    Spinner,
    FindItem,
    CarInfoItem,
    SignItem,
    SeekCarItem,
    SeekPersonItem,
    ScrollView
  },

  mixins: [saveScroll, swipeDownRefresh],

  data (){
    return {
      carouselList: [],  // 轮播图

      blocks: [         // 宫格块
        // {
        //   icon: require('@img/home/home_icon_ershouche@2x.png'),
        //   label: '二手车',
        //   link: 'allList/usedCar',
        // }, {
        //   icon: require('@img/home/home_icon_biaoshu@2x.png'),
        //   label: '标书',
        //   link: 'allList/signs',
        // }, {
        //   icon: require('@img/home/home_icon_renzhaoche@2x.png'),
        //   label: '人找车',
        //   link: 'allList/seekCar',
        // }, {
        //   icon: require('@img/home/home_icon_chezhaoren@2x.png'),
        //   label: '车找人',
        //   link: 'allList/seekPerson',
        // },

        // {
        //   icon: require('@img/home/home_icon_ershouwupin@2x.png'),
        //   label: '二手物品',
        //   link: '',
        // }, {
        //   icon: require('@img/home/home_icon_jinrongfuwu@2x.png'),
        //   label: '金融服务',
        //   link: '',
        // }, {
        //   icon: require('@img/home/home_icon_yewuzixun@2x.png'),
        //   label: '业务资讯',
        //   link: '',
        // }, {
        //   icon: require('@img/home/home_icon_sijifuli@2x.png'),
        //   label: '司机福利',
        //   link: '',
        // }
      ],

      findsData: null,      // 发现
      usedCarData: null,    // 二手车
      signsData: null,      // 标书
      seekCarData: null,    // 人找车
      seekPersonData: null, // 车找人

      // 下拉刷新方法
      swipeDownRefreshMethod: () => this.loadData(false),

      // 下拉刷新时用于禁用触摸移动(touchmove)的标记，如果不禁用，微信内嵌浏览器将会在上方显示“网页由qq浏览器提供技术支持...”
      // 导致下拉刷新失效(touchend 事件不触发)
      swipeDownRefreshMoveEventDisabled: true
    }
  },

  mounted (){
    this.loadData()
    this.loadCarousel()
    this.localBlockBtn()
    // 监听事件reload
    this.$bus.$on('home-reload', this.loadData)
  },

  computed: {
    city (){
      var local = this.$store.getters['location/local']
      return local ? local.name : '定位中'
    },
  },

  watch: {
    $route (route){
      route.query.reload && this.loadData()
    }
  },

  methods: {
    // 载入首页数据
    loadData (showLoading = true){
      showLoading && this.$vux.loading.show({ text: '加载中' })
      return _api('index/home', {}, { loading: false })
      .finally(this.$vux.loading.hide)
      .then(data =>{
          console.log(JSON.stringify(data))
        this.findsData = data.finds[0]
        this.usedCarData = data.used_cars
        this.signsData = data.signs
        this.seekCarData = data.person_seek_car
        this.seekPersonData = data.car_seek_person
      })
    },

    // 获取轮播图
    loadCarousel (){
      _api('ad/getListByCon', {
        ad_position: 1
      }).then(({data}) =>{
        this.carouselList = data.map(data =>{
          if(data.ad_type === 1){
            var richTextUrl = '/common/richText?id=' + data.id
            sessionStorage.setItem('richText-' + data.id, data.content_html)
          }

          var url = richTextUrl || data.target || 'javascript:'
          return { url, img: data.img }
        })
      })
    },

    // 获取宫格按钮
    localBlockBtn (){
      _api('homeColumn/getListByCon').then(data =>{
        this.blocks = this.blocks.concat(
          data.data.map(item => ({ icon: item.img, label: item.title, link: item.url }))
        )

        console.log(this.blocks)
      })
    },

    // 给动态获取的宫格按钮用的
    open (url){
      location.href = url
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .weui-grids{
  overflow: initial;

  .weui-grid:nth-child(1) > .weui-grid__icon,
  .weui-grid:nth-child(2) > .weui-grid__icon,
  .weui-grid:nth-child(3) > .weui-grid__icon,
  .weui-grid:nth-child(4) > .weui-grid__icon{
    width: 35px;
    height: 35px;
  }

  .weui-grid::after{
    display: none;
  }

  &::before{
    display: none;
  }
}

.mainContainer{
  padding-bottom: 20px;
}

header{
  position: relative;

  /deep/ .carouse-dot{
    bottom: 30px;
  }

  .content{
    position: absolute;
    width: 100%;
    height: min-content;
    top: 20px;
    left: 0;
  }

  .searchBar{
    color: white;

    .city{
      margin-left: 10px;
    }
    .city > *{
      vertical-align: middle;
    }

    .serach{
      height: 30px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      padding-left: 20px;
      font-size: 14px;
      position: relative;
      margin: 0 20px;

      input::-webkit-input-placeholder{
        color: white;
      }

      &::before{
        content: '';
        width: 18px;
        height: 18px;
        background-image: url('~@img/home/home_icon_search@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
      }
    }
  }
}

.blocks{
  border-radius: 20px 20px 0 0;
  position: relative;
  top: -20px;
  padding-top: 20px;
  background-color: white;
}

main{

  .content{
    padding: 15px;
    padding-top: 0;
  }

  .subtitle{
    text-indent: 15px;
    font-size: 17px;
    font-weight: bold;
    position: relative;
    margin: 15px 0 10px 0;

    &::before{
      content: '';
      display: block;
      width: 3px;
      height: 50%;
      background-color: @theme;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .rightBtn{
      display: inline-block;
      margin-left: auto;

      &::before{
        content: '更多';
        display: inline;
        font-weight: initial;
        font-size: 16px;
      }

      &::after{
        content: '';
        width: 7px;
        height: 13px;
        display: inline-block;
        background-image: url('~@img/home/home_icon_more@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
        margin-left: 7px;
        vertical-align: -1px
      }
    }
  }
}

.refreshHintBox{
  overflow: hidden;

  &.heightAnimated{
    transition: all 0.3s;
  }

  .content{
    height: 100%;
    min-height: 70px;
    transition: all 0.1s;

    .text{
      margin-left: 10px;
    }
  }
}
</style>
